import React, { useState } from 'react';
import { IFormItem, Itype } from '@/base-ui/form';
import http from '@/services/request';
import { Space, Button, Select } from 'antd';
import { IToolButton } from '@/base-ui/tool-bar';
import { Input } from 'antd';
import { RightOutlined, UpOutlined } from '@ant-design/icons';
const { Option } = Select;
const { Search } = Input;
/* 搜索区域 */
export const PageSearchConfig: IFormItem[] = [
  {
    type: 'input' as Itype,
    label: '供货单位',
    name: 'supplyUnit',
    placeholder: '请输入供货单位'
  },
  {
    type: 'input' as Itype,
    label: '手机号码',
    name: 'phoneNumber',
    placeholder: '请输入供货单位联系人手机号码'
  },
  {
    type: 'input' as Itype,
    label: '货物名称',
    name: 'goodName',
    placeholder: '请输入货物名称'
  },
  {
    type: 'input' as Itype,
    label: '货物数量',
    name: 'number',
    placeholder: '请输入货物数量'
  },
  {
    type: 'input' as Itype,
    label: '货物重量',
    name: 'weight',
    placeholder: '请输入货物重量'
  },
  {
    type: 'input' as Itype,
    label: '称重日期',
    name: 'weighDate',
    placeholder: '请输入称重日期'
  },
  {
    type: 'input' as Itype,
    label: '监督人',
    name: 'supervisor',
    placeholder: '请输入监督人'
  },
  {
    type: 'input' as Itype,
    label: '备注',
    name: 'remark',
    placeholder: '请输入备注'
  },
  {
    type: 'input' as Itype,
    label: '收货人',
    name: 'consignee',
    placeholder: '请输入收货人'
  }
];

// 选择器配置
export const SearchSelector = (props: any) => {
  const [searchId, setSearchId]: any = useState('consignee');
  return (
    <div
      style={{
        display: 'inline-block',
        width: '380px',
        marginBottom: 10,
        marginRight: 10,
        float: 'right'
      }}
    >
      <Select
        defaultValue={Options[0].label}
        style={{ width: 100 }}
        defaultActiveFirstOption
        onSelect={(value: string, option: any) => {
          setSearchId(option.key);
        }}
      >
        {Options.map((i) => (
          <Option value={i.label} key={i.value} children={null} />
        ))}
      </Select>
      <Search
        placeholder="请输入您要查的数据"
        onSearch={(e) => {
          if (e === '') {
            http
              .get('/server/weighInDateSlaughter/list/1/10')
              .then((res: { data: { records: any } }) => {
                props.dataSource(res.data.records);
              });
            return;
          }
          switch (searchId) {
            case 'consignee': {
              http(`/server/weighInDateSlaughter/getByConsignee/${e}`).then(
                (res) => {
                  props.dataSource(res.data);
                }
              );
              break;
            }
            case 'goodName': {
              http(`/server/weighInDateSlaughter/getByGoodsName/${e}`).then(
                (res) => {
                  props.dataSource(res.data);
                }
              );
              break;
            }
            case 'phoneNumber': {
              http(`/server/weighInDateSlaughter/getByPhoneNumber/${e}`).then(
                (res) => {
                  props.dataSource(res.data);
                }
              );
              break;
            }
            default: {
              return;
            }
          }
        }}
        style={{ width: '280px' }}
        enterButton
      />
    </div>
  );
};

const Options = [
  { label: '收货人', value: 'consignee', onClick: (e: any) => { } },
  { label: '货物名称', value: 'goodName', onClick: (e: any) => { } },
  { label: '供货单位电话', value: 'phoneNumber', onClick: (e: any) => { } }
];

//高级检索
export const UseSearch = (props: any) => {
  return (
    <Space style={{ float: 'right' }}>
      {props.isMoreSearchShow ? (
        <Button
          type="link"
          size="large"
          /* onClick={() => onMoreSearchClick(false)} */
          onClick={() => {
            props.setisMoreSearchShow(false); props.setsearchMore(false);
          }}
        >
          收起
          <UpOutlined />
        </Button>
      ) : (
        <Button
          type="link"
          size="middle"
          onClick={() => {
            props.setisMoreSearchShow(true); props.setsearchMore(true);
          }}
        >
          高级检索
          <RightOutlined style={{ marginLeft: '1px' }} />
        </Button>
      )}
    </Space>
  );
};

// 按钮组
export const buttonGroup: IToolButton[] = [
  { type: 'create', text: '新增记录', isShow: true, onClick: () => { } },
  { type: 'delete', text: '批量删除', isShow: true, onClick: () => { } },
  { type: 'import', text: '导入', isShow: true, onClick: () => { } },
  { type: 'export', text: '导出', isShow: true, onClick: () => { } }
];
//复选框的接口
export interface DataType {
  key: number;
  id: number;
  name: string;
  age: number;
  address: string;
}
